<template>
  <el-dialog
    :model-value="props.visible"
    title="设置角色权限对话框"
    width="80%"
    draggable
    :destroy-on-close="true"
    :lock-scroll="false"
    :close-on-click-modal="false"
    :before-close="closeDialog"
    @open="openDialogHandler"
  >
    <div style="min-height: 50vh">
      <div class="infoBar">
        <div class="title">当前角色信息</div>
        <div class="form">
          <div class="infoItem">
            <div class="label">角色编码 :</div>
            <div class="value">{{ roleName }}</div>
          </div>

          <div class="infoItem">
            <div class="label">角色描述 :</div>
            <div class="value">{{ roleDescription }}</div>
          </div>

          <div class="infoItem">
            <div class="label">角色名称 :</div>
            <div class="value">{{ roleRealName }}</div>
          </div>

          <div class="infoItem">
            <div class="label">角色分类 :</div>
            <div class="value">{{ getDescriptionStr(parentSortIds) }}</div>
          </div>
        </div>
      </div>

      <!-- 角色用户列表 -->
      <Transfer :role-info="props.roleInfo"></Transfer>
    </div>

    <template #footer>
      <div style="display: flex; justify-content: center; margin-top: 10px">
        <el-button color="#626aef" size="large" @click="closeDialog">
          关闭弹窗
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import 'element-plus/theme-chalk/el-message.css'
import { storeToRefs } from 'pinia'
import { useSortTreeStore } from '@/features/store/store'

import Transfer from './Transfer.vue'

const { originData, sortTree } = storeToRefs(useSortTreeStore())
const { findParentValues, getSortList, getDescriptionStr } = useSortTreeStore()

const props = defineProps({
  roleInfo: { type: Object as () => RoleItf, default: {} },
  visible: { type: Boolean, default: false },
})

// 定义传递给父组件的方法
const emits = defineEmits(['closeDialogHandler'])
const closeDialog = () => emits('closeDialogHandler')

// 对话框显示时的回调
const openDialogHandler = () => {
  if (originData.value.length === 0) getSortList()

  const { name, realName, description, sortId } = props.roleInfo
  roleName.value = name
  roleRealName.value = realName
  roleDescription.value = description
  parentSortIds.value = findParentValues(sortTree.value, sortId)
}

// 角色上级分类id列表
const parentSortIds = ref<string[]>([])
const roleName = ref<string>('')
const roleRealName = ref<string>('')
const roleDescription = ref<string>('')
</script>

<style lang="less" scoped>
.infoBar {
  padding: 10px 0px;
  border-bottom: 1px solid #dcdfe6;
  margin-bottom: 10px;

  > .title {
    font-size: 14px;
    font-weight: bold;
    user-select: none;
    color: #606266;
    letter-spacing: 2px;
    padding-bottom: 5px;
  }

  > .form {
    display: flex;
    flex-wrap: wrap;

    > .infoItem {
      display: flex;
      align-items: center;
      min-width: 400px;
      padding: 5px 0;

      > .label {
        font-size: 14px;
        font-weight: bold;
        padding-right: 15px;
        user-select: none;
        color: #918f8f;
        letter-spacing: 2px;
        width: 80px;
      }

      > .value {
        font-size: 14px;
        font-weight: bold;
        color: #606266;
        letter-spacing: 1px;
      }
    }
  }
}
</style>
